/**
 * 该 Vite 配置文件用于将组件库中所有组件的样式打包到统一的一个 css 文件中
 *
 * 需要注意的是，需要先执行将组件库中每个组件的样式代码打包到单独的 css 文件中，然后再使用该配置进行打包组件库，
 * 因为在 vite.config.css-split.ts 中配置了 emptyOutDir: true，会清除之前的打包结果，而当前配置中配置
 * 了 emptyOutDir: false，不会清除之前的打包结果。
 */

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dts from 'vite-plugin-dts'
import * as path from 'path'
import { ViteUtil } from '@xtail/vite'

// 项目中 src 目录的绝对路径
const srcAbsolutePath: string = path.resolve(__dirname, './src')

export default defineConfig({
  // 插件
  plugins: [
    vue(),
    // 生成 d.ts 文件的插件
    dts(
      ViteUtil.genPluginDtsOptions({
        // ts 配置文件路径
        tsconfigPath: './tsconfig.lib.json'
      })
    )
  ],
  // vite 构建工具中的解析器配置
  resolve: {
    // 配置别名解析
    alias: {
      // 将项目文件中使用的 `@` 解析为 `src` 目录的绝对路径
      '@': srcAbsolutePath
    }
  },
  // 打包配置
  build: ViteUtil.genLibBuildConfig({
    // 清除之前的打包结果
    emptyOutDir: false,
    // 将组件中的样式代码拆分到单独的 css 文件中
    // 关于自定义打包的静态文件名称可以参考：https://blog.csdn.net/qq_32805013/article/details/134420142
    // 由于组件的写法使用的是单文件组件的形式，所以样式的打包等无法使用 https://juejin.cn/post/7138212982558818311#heading-7 中 gulp 编写工作流的方式
    cssCodeSplit: false,
    // rollup 相关配置
    rollupOptions: ViteUtil.genLibRollupOptions({
      // 排除不需要的依赖
      external: ['vue', 'vue-router', 'element-plus']
    })
  })
})
